<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
		<base href="<%=basePath%>"> 
		<link rel="stylesheet" type="text/css" href="<%=basePath%>js/themes/default/easyui.css">
		<link rel="stylesheet" type="text/css" href="<%=basePath%>js/themes/icon.css">
		<link rel="stylesheet" type="text/css" href="<%=basePath%>js/themes/color.css">
		<link rel="stylesheet" type="text/css" href="<%=basePath%>js/demo/demo.css">
		<script type="text/javascript" src="<%=basePath%>js/jquery.min.js"></script>
		<script type="text/javascript" src="<%=basePath%>js/jquery.easyui.min.js"></script>
		<script type="text/javascript" src="<%=basePath%>js/easyui-lang-zh_CN.js"></script>								
     	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">	
		<title> 编辑个人信息 </title>
		
		<script type="text/javascript">
		 
		        function startTime()  
				    {  
				        //获取当前系统日期  
				        var today=new Date();  
				        var h=today.getHours();  
				        var m=today.getMinutes();  
				        var s=today.getSeconds();  
				        //调用checkTime（）函数，小于十的数字前加0  
				        m=checkTime(m);  
				        s=checkTime(s);  
				        //s设置层txt的内容  
				        document.getElementById('time').innerHTML=h+":"+m+":"+s ; 
				        //过500毫秒再调用一次  
				        t=setTimeout('startTime()',500);  
				        //小于10，加0  
				        function checkTime(i)  
				        {  
				            if(i<10){
				                i="0" + i ;
				             }  
				               return i ;
				        }  
				    } 
		</script>

        <style type="text/css">            
            
             body{    
			      background-image: url(<%=basePath%>/img/blueworld.jpg);    			        
			 }
			 
			 .right0{
			        position:absolute; /*绝对定位*/ 
			        right:3%;
			 }
			 
			 .right1{
			        position:absolute; /*绝对定位*/ 
			        right:8%;
			 }                                     
        </style>

</head>
<body onload="startTime()">
   
  <center>
     <br><br>
     <div class="easyui-layout" style="width:1025px;height:560px;">
          
          <div id="p" data-options="region:'north',iconCls:'icon-man'" title="个人用户主页" style="width:20%;padding:35px">
            
            <a href="data/toPersonal" class="right1"><h2>刷新</h2></a>&nbsp;
            <a href="Login/logout" class="right0"><h2>退出</h2></a>
          
          </div>
			
		  <div id="nv" data-options="region:'west'" title="导航栏" style="width:15%;">
		
		       <div class="easyui-accordion" style="width:100%;height:99%;">
			       
			       <div title="主页" data-options="iconCls:'icon-man'" style="overflow:auto;">
			       
		                <ul class="easyui-tree">
						<li>
						<span>菜单</span>															
						     <ul><li><a ref="ref" href="#">主页</a></li></ul>																			
							 <li>welcome.html</li>							
						</li>
	                    </ul>			       
			       </div>			    
			       <div title="用户管理" data-options="iconCls:'icon-tip'" style="overflow:auto;">			       			             
			             <ul class="easyui-tree">
			                 <li>
						        <span>编辑个人信息</span>
						         <ul><li><a ref="userManager" href="#">编辑个人信息</a></li></ul>
						     </li>
						 </ul>        			             
			       </div>			       
			       
			       <div title="帮助" data-options="iconCls:'icon-help'" style="overflow:auto;">			       			       
			             <ul class="easyui-tree">			           	
						     <li><a ref="help" href="#">帮助</a></li>
						 </ul>			       
			       </div>

			    </div>
		
		  </div> 
			
			
	      <div data-options="region:'center'"> 
	      <div title="tt" id="tdg" class="easyui-tabs" style="width:888px;height:440px;"> 
							
		  <div title="个人信息" style="padding:10px" data-options="iconCls:'icon-tip'">
		     <table id="dg" class="easyui-datagrid" ></table>
		  </div>
		
		  <div title="主页" style="padding:10px" data-options="iconCls:'icon-man'">
		     <ul class="easyui-tree" data-options=" "></ul>
	      </div>
					
		  <div title="帮助" style="padding:10px" data-options="iconCls:'icon-help'">
		     <ul class="easyui-tree" data-options=" "></ul>
	      </div>
	      </div>
	         <div id="time" class="right0"></div>  
          </div> 	          
    </div>
     
     
     <!--  编辑工具栏      --> 
	 <div id="toolbar"> 
	             
	     <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-edit'" onclick="editUser()">编辑个人信息</a>        
	     <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-reload'" onclick="reLoad()">刷新</a>	        		   	   
     </div>
     
     
     <!-- 编辑用户弹出框     -->
	<div id="dlg" class="easyui-dialog" title="编辑用户信息" data-options="iconCls:'icon-add'" closed="true" style="width:350px;height:520px;padding:30px 60px;" buttons="#dlg-buttons">		  
		  <form id="fm" name="fm" method="post" >      
		    <table id="tb" name="tb" cellpadding="5">		    	       
		       <div style="margin-bottom:20px">
		           <label class="label-top">用户名:</label>
		           <input name="username" class="easyui-textbox" required="true" style="width:230px;height:28px"/>
		       </div>     
		       <div style="margin-bottom:20px">    
		           <label class="label-top">密码:</label>
		           <input name="password" class="easyui-textbox" required="true" style="width:230px;height:28px"/>
		       </div>
		       <div style="margin-bottom:20px">
		           <label class="label-top">性别:</label>
		           <input name="sex" class="easyui-textbox" style="width:230px;height:28px"/>
		       </div>
		       <div style="margin-bottom:20px">
		           <label class="label-top">邮箱:</label>
		           <input name="email" class="easyui-textbox" data-options="validType:'email'" style="width:230px;height:28px"/>
		       </div> 
		       <div style="margin-bottom:20px">
		           <label class="label-top">地址:</label>
		           <input name="address" class="easyui-textbox" style="width:200px;height:28px"/>
		       </div>
		       <div style="margin-bottom:20px">
		           <label class="label-top">用户类型:</label><br>
		           <select name="usertype" class="easyui-combobox" style="width:230px;height:28px">      
		           <option value="null"> </option>
		           <option value="manager">manager</option>
		           <option value="user">user</option>
		           </select>
		       </div>     		     	     		     
		   </table>
	   </form> 
     </div> 
   
     <div id="dlg-buttons">
        <a href="javascript:void(0)" class="easyui-linkbutton"  data-options="iconCls:'icon-ok'" onclick="saveUser()">确定</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" onclick="javascript:$('#dlg').dialog('close');">取消</a>
     </div>
     
     
     <script type="text/javascript">
              $(function(){
            
                    datagrid = $('#dg').datagrid({
                    
                    url:"data/getUserByName",
                    
                    columns:[[	          			          
			          { field:'ck',checkbox:true}, 
			                  
		              { field:'id', title:'ID', width:'80',align:'center'},
					  
		              { field:'username', title:'用户名', width:'110',align:'center'},
		              
		              { field:'password', title:'密码', width:'110',align:'center'},
		              
		              { field:'sex', title:'性别', width:'70',align:'center'},
		              
		              { field:'email', title:'邮箱', width:'175',align:'center'},
		              
		              { field:'address', title:'地址', width:'175',align:'center'},
		              
		              { field:'usertype', title:'用户类型', width:'80',align:'center'}, 
			       ]],
                    
                    method:"post",
	                toolbar:'#toolbar',	          
		            rownumbers:true,
				    singleSelect:true,
				    autoRowHeight:false,
				    collapsible:true,
				    /* pagination:true,
				    pageSize:8,
					pageList:[5,8,10,15,20],  */		       
	                width:866,
	                height:385,                                  
                   });
                });
                
                
                       
           //编辑用户信息
           function editUser() {
           var rows = $('#dg').datagrid('getSelected');
           if (rows) {
               $('#dlg').dialog('open').dialog('setTitle', 'Edit User');
               $('#fm').form('load', rows);
               url = "data/updateUser?id=" + rows.id;
              }
           }
         
             
          //保存用户信息           
	      function saveUser(){
		  $('#fm').form('submit',{
			  url: url,
			  onSubmit: function(){
				return $(this).form('validate');
			},
			  success: function(result){
				  /* var result = eval('(' + result + ')'); */
				  if (result == 1){
				        $('#dlg').dialog('close');		// close the dialog
						$('#dg').datagrid('reload');	// reload the user data
				  } else {						
				          $.messager.show({
						  title: 'Error',
						  msg: "用户名已经被使用！",
					     });
				      }
			       }
		       });
	       }
          
        //查找用户信息
          function doSearch(){
	        	         
		     $('#dg').datagrid('load',{
		                 
                 id: $('#id').val(),	                
                 username: $('#username').val()		              
		     }); 
		   }  
               
                                            
         //刷新页面
         function reLoad() {
             $('#dg').datagrid('reload');
         }
         
       /*   //自定义分页      
         $(function(){
			  var pager = $('#dg').datagrid().datagrid('getPager');
			  pager.pagination({
			 	 pageSize:8,//每页显示的记录条数 		     
		         beforePageText: '第',//页数文本框前显示的汉字  
		         afterPageText: '页    共 {pages} 页',  
		         displayMsg: '当前显示 {from} - {to} 条记录   共 {total} 条记录' , 	
			 });			
		 }); */

     </script>
  </center>
</body>
</html>

<%-- 		
		<center>
		<br><br>
		         
			<table  id="usertable" border="1">
				<tbody align="center">
					
					<tr>
					    <th>ID</th>
						<th>用户</th>
						<th>密码</th>				
						<th>性别</th>				
						<th>邮箱</th>				
						<th>地址</th>	
						<th>类型</th>							
						<th>编辑</th>				
					</tr>
				<c:if test="${not empty user }">
				<c:forEach items="${user }" var="u">
					<tr>
					    <td><input type="text" name="id" id="id" value="${u.id }"/></td>
						<td><input type="text" name="username" id="username" value="${u.username }"/></td>
						<td><input type="text" name="password" id="password" value="${u.password }"/></td>		
						<td><input type="text" name="sex" id="sex" value="${u.sex }"/></td>			
						<td><input type="text" name="email" id="email" value="${u.email }"/></td>				
						<td><input type="text" name="address" id="address" value="${u.address }"/></td>				
						<td><input type="text" name="usertype" id="usertype" value="${u.usertype }"/></td>
						
						<td><a href="data/getPsById?id=${u.id }">编辑</a></td>
								
					</tr>
					</c:forEach>
		            </c:if>
				</tbody>
			</table>
		
		</center> --%>